<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/order_list' }">订单列表</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="order-page">
			<div class="title">
				订单列表
			</div>
			<div class="top-tabs">
				<div v-for="item in tabsList" :key="item.index"
					:class="activeIndex === item.index ? 'activity-item' : ''" class="tabs-item" @click="cutTabs(item)">
					{{item.name}}
				</div>
			</div>
			<div v-if="activeIndex == 1">
				<div class="choice-list">
					<div class="choice-item" v-for="item in searchList" :key="item.index">
						<div class="choice-title">{{item.name}}</div>
						<el-select v-if="item.type == '1'" v-model="item.ivalue" :placeholder="item.placeholder">
							<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
						</el-select>
						<el-input v-model="item.ivalue" v-if="item.type == '2'" class="rounded-input"
							@blur="blurClick()" @focus="focusClick(item)" :placeholder="item.placeholder" />
						<el-date-picker v-if="item.type=='3'" v-model="item.ivalue" type="datetime"
							:placeholder="item.placeholder" style="width: 250px;" :suffix-icon="CaretBottom" />
					</div>
				</div>
				<div class="btn-box">
					<div class="btn-left">
						<el-button round color="#0071bb">导出补货清单</el-button>
						<el-button round :icon="Refresh">刷新</el-button>
						<el-button round :icon="HelpFilled">筛选</el-button>
					</div>
					<div class="choice-btn">
						<el-button round :icon="Search" color="#0071bb">查询</el-button>
						<el-button round :icon="RefreshLeft">重置</el-button>
					</div>
				</div>
				<div class="tables">
					<el-table :data="tableData" style="width: 100%">
						<el-table-column type="selection" v-model="whole" />
						<el-table-column prop="id" label="序号" />
						<el-table-column prop="open_time" label="开门时间" />
						<el-table-column prop="close_time" label="关门时间" />
						<el-table-column prop="pay_time" label="支付时间" />
						<el-table-column prop="pay_method" label="支付方式" />
						<el-table-column prop="order_num" label="订单号" />
						<el-table-column prop="order_type" label="订单状态">
							<template #default="scope">
								<div class="wait" v-if="scope.row.type == 1">
									{{ scope.row.order_type}}
								</div>
								<div class="success" v-if="scope.row.type == 2">
									{{ scope.row.order_type}}
								</div>
								<div class="fail" v-if="scope.row.type == 3 || scope.row.type == 4">
									{{ scope.row.order_type}}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="设备名称" />
						<el-table-column prop="imei" label="设备IMEI号" />
						<el-table-column prop="tell" label="手机号码" />
						<el-table-column prop="personnel" label="补货员" />
						<el-table-column prop="check" label="查看">
							<template #default="scope">
								<div class="check-text" @click="dialogVisible = true">
									{{ scope.row.check}}
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="page_number">
					<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
						:disabled="disabled" layout="prev, pager, next, jumper,total" :total="10"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
			<div v-if="activeIndex == 2">
				<div class="choice-list">
					<div class="choice-item" v-for="item in secondList" :key="item.index">
						<div class="choice-title">{{item.name}}</div>
						<el-select v-if="item.type == '1'" v-model="item.ivalue" :placeholder="item.placeholder">
							<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
						</el-select>
						<el-input v-model="item.ivalue" v-if="item.type == '2'" class="rounded-input"
							@blur="blurClick()" @focus="focusClick(item)" :placeholder="item.placeholder" />
						<el-date-picker v-if="item.type=='3'" v-model="item.ivalue" type="datetime"
							:placeholder="item.placeholder" style="width: 250px;" :suffix-icon="CaretBottom" />
					</div>
				</div>
				<div class="btn-box">
					<div class="btn-left">
						<el-button round color="#0071bb">导出补货清单</el-button>
						<el-button round :icon="Refresh">刷新</el-button>
						<el-button round :icon="HelpFilled">筛选</el-button>
					</div>
					<div class="choice-btn">
						<el-button round :icon="Search" color="#0071bb">查询</el-button>
						<el-button round :icon="RefreshLeft">重置</el-button>
					</div>
				</div>
				<div class="tables">
					<el-table :data="secondData" style="width: 100%">
						<el-table-column type="selection" v-model="all" />
						<el-table-column prop="id" label="序号" />
						<el-table-column prop="open_time" label="开门时间" />
						<el-table-column prop="close_time" label="关门时间" />
						<el-table-column prop="pay_time" label="支付时间" />
						<el-table-column prop="pay_method" label="支付方式" />
						<el-table-column prop="order_num" label="订单号" />
						<el-table-column prop="order_type" label="订单状态">
							<template #default="scope">
								<div class="success" v-if="scope.row.type == 5">
									{{ scope.row.order_type}}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="设备名称" />
						<el-table-column prop="imei" label="设备IMEI号" />
						<el-table-column prop="tell" label="手机号码" />
						<el-table-column prop="personnel" label="补货员" />
						<el-table-column prop="check" label="查看">
							<template #default="scope">
								<div class="check-text" @click="dialogVisible = true">
									{{ scope.row.check}}
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="page_number">
					<el-pagination v-model:current-page="secondPage" v-model:page-size="second_pageSize" :size="size"
						:disabled="second_disabled" layout="prev, pager, next, jumper,total" :total="10"
						@size-change="secondSizeChange" @current-change="secondCurrentChange" />
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogVisible" width="60%">
			<div class="info-title">
				订单详情
			</div>
			<div class="from-title">
				订单信息
			</div>
			<el-table class="pop-table" :data="tableDatainfo" border :span-method="infoarraySpanMethod"
				style="width: 100%">
				<el-table-column prop="title" />
				<el-table-column>
					<template #default="scope">
						<div class="cont" v-if="scope.row.title == '订单号'">
							{{scope.row.ordercode}}
						</div>
						<div class="cont" v-if="scope.row.title == '开门信息'">
							{{scope.row.opentime}}
						</div>
						<div class="cont" v-if="scope.row.title == '支付时间'">
							{{scope.row.paytime}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="title2" />
				<el-table-column>
					<template #default="scope">
						<div v-if="scope.row.title2 == '订单状态'">
							<div v-if="scope.row.paytype == '1'" style="color: #ffaa00;font-weight: 400;">支付成功</div>
							<div v-if="scope.row.paytype == '2'" style="color: #999999;font-weight: 400;">支付失败</div>
						</div>
						<div class="cont" v-if="scope.row.title2 == '关门时间'">
							{{scope.row.closingtime}}
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div v-if="activeIndex == 1">
				<div class="from-title">
					支付信息
				</div>
				<el-table class="pop-table" :data="tableDatapay" border :span-method="payarraySpanMethod"
					style="width: 100%">
					<el-table-column prop="title" />
					<el-table-column>
						<template #default="scope">
							<div class="cont" v-if="scope.row.title == '总金额'">
								{{scope.row.amount}}
							</div>
							<div class="cont" v-if="scope.row.title == '会员金币支付'">
								{{scope.row.coinpayment}}
							</div>
							<div class="cont" v-if="scope.row.title == '实际金额支付'">
								{{scope.row.payment}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="title2" />
					<el-table-column>
						<template #default="scope">
							<div class="cont" v-if="scope.row.title2 == '惠家红包抵扣'">
								{{scope.row.welhome}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="title3" />
					<el-table-column>
						<template #default="scope">
							<div class="cont" v-if="scope.row.title3 == '乐汇红包抵扣'">
								{{scope.row.lehui}}
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="from-title">
				设备信息
			</div>
			<el-table class="pop-table" :data="tableDevice" border :span-method="infoarraySpanMethod"
				style="width: 100%">
				<el-table-column prop="title" />
				<el-table-column>
					<template #default="scope">
						<div class="cont" v-if="scope.row.title == '设备名称'">
							{{scope.row.ordercode}}
						</div>
						<div class="cont" v-if="scope.row.title == '投放地址'">
							{{scope.row.address}}
						</div>
						<div class="cont" v-if="scope.row.title == '监控回放'" style="color: #5252ff;">
							{{scope.row.monitor}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="title2" />
				<el-table-column>
					<template #default="scope">
						<div v-if="scope.row.title2 == '设备IEMI号'">
							<div style="color: #999999;">
								{{scope.row.iemi}}
							</div>
						</div>
						<div class="cont" v-if="scope.row.title2 == '最新同步时间'">
							{{scope.row.sync_time}}
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div v-if="activeIndex == 1">
				<div class="from-title">
					商品信息
				</div>
				<el-table :data="goodsData" style="width: 100%">
					<el-table-column prop="img" label="商品图片">
						<template #default="scope">
							<img class="goods_img" :src="scope.row.img" alt="" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="商品名称" />
					<el-table-column prop="code" label="商品条码" />
					<el-table-column prop="num" label="商品数量" />
					<el-table-column prop="price" label="商品价格" />
					<el-table-column prop="species" label="会员金币支付" />
					<el-table-column prop="welhome" label="惠家红包抵扣" />
					<el-table-column prop="lehui" label="乐汇红包抵扣" />
					<el-table-column prop="envelope" label="赠送惠家红包" />
					<el-table-column prop="pay_num" label="实际支付" />
				</el-table>
			</div>
			<div v-if="activeIndex == 2">
				<div class="from-title">
					本次提货信息
				</div>
				<el-table :data="takeData" style="width: 100%">
					<el-table-column prop="img" label="商品图片">
						<template #default="scope">
							<img class="goods_img" :src="scope.row.img" alt="" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="商品名称" />
					<el-table-column prop="code" label="商品条码" />
					<el-table-column prop="num" label="商品数量" />
				</el-table>
				<div class="from-title">
					提货卡信息
				</div>
				<el-table :data="cardData" style="width: 100%">
					<el-table-column prop="img" label="商品图片">
						<template #default="scope">
							<img class="goods_img" :src="scope.row.img" alt="" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="商品名称" />
					<el-table-column prop="use_num" label="可提货数量" />
					<el-table-column prop="used_num" label="已提货数量" />
					<el-table-column prop="day_num" label="每天提货数量" />
					<el-table-column prop="time" label="最近提货时间" />
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { CaretBottom, Refresh, HelpFilled, Search, RefreshLeft } from '@element-plus/icons-vue'
	import type { ComponentSize } from 'element-plus'
	const tableDatapay = [
		{
			title: '总金额',
			amount: '5',
		},
		{
			title: '会员金币支付',
			coinpayment: '0',
			title2: '惠家红包抵扣',
			welhome: '0',
			title3: '乐汇红包抵扣',
			lehui: '0',
		},
		{
			title: '实际金额支付',
			payment: '5'
		},
	]
	const cardData =[
		{
			img: 'https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
			name: '康帅傅茉莉蜜茶',
			use_num: '25',
			used_num: '5',
			day_num: '5',
			time: '2024-05-15——12:25:42',
		},
		{
			img: 'https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
			name: '康帅傅茉莉蜜茶',
			use_num: '25',
			used_num: '5',
			day_num: '5',
			time: '2024-05-15——12:25:42',
		}
	]
	const takeData = [
		{
			img: 'https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
			name: '康帅傅茉莉蜜茶',
			code: '9476584786',
			num: '1',
			price: '5',
			species: '0',
			welhome: '0',
			lehui: '0',
			envelope: '0',
			pay_num: '5'
		}
	]
	const goodsData = [
		{
			img: 'https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
			name: '康帅傅茉莉蜜茶',
			code: '9476584786',
			num: '1',
			price:'5',
			species:'0',
			welhome:'0',
			lehui:'0',
			envelope:'0',
			pay_num:'5'
		}
	]
	const tableDevice = [
		{
			title: '设备名称',
			title2: '设备IEMI号',
			iemi: '9898949493894',
			ordercode: '伯克材料8745874',
			paytype: '1',
		},
		{
			title: '投放地址',
			title2: '最新同步时间',
			sync_time: '2000-12-12',
			address: '常熟市新颜路22号',
		},
		{
			title: '监控回放',
			monitor: '查看监控',
		},
	]
	const tableDatainfo = [
		{
			title: '订单号',
			title2: '订单状态',
			ordercode: '123123123',
			paytype: '1',
		},
		{
			title: '开门信息',
			title2: '关门时间',
			closingtime: '2000-12-12',
			opentime: '2000-12-12',
		},
		{
			title: '支付时间',
			paytime: '2000-12-12',
		},
	]
	const infoarraySpanMethod = ({ row, column, rowIndex, columnIndex } : { row : any, column : any, rowIndex : number, columnIndex : number }) => {
		if (columnIndex === 1) {
			if (rowIndex == 2) {
				return {
					rowspan: 1,
					colspan: 3
				};
			}
		}
	};
	const payarraySpanMethod = ({ row, column, rowIndex, columnIndex } : { row : any, column : any, rowIndex : number, columnIndex : number }) => {
		if (columnIndex === 1) {
			if (rowIndex == 2) {
				return {
					rowspan: 1,
					colspan: 5
				};
			}
		}
		if (columnIndex === 1) {
			if (rowIndex == 0) {
				return {
					rowspan: 1,
					colspan: 5
				};
			}
		}
	};
	interface tabsList {
		name : string;
		index : string;
	}
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	const dialogVisible = ref(false)
	const activeIndex = ref("1");
	const choiceIndex = ref("");
	const whole = ref(false)
	const all = ref(false)
	const currentPage = ref(1);
	const secondPage = ref(1);
	const pageSize = ref(1);
	const second_pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const disabled = ref(false)
	const second_disabled = ref(false)
	const secondData = [
		{
			id: '1',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '微信',
			order_num: '87434893841',
			order_type: '已完成',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
			type: '5'
		},
		{
			id: '2',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '支付宝',
			order_num: '87434893841',
			order_type: '已完成',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
			type: '5'
		},
		{
			id: '3',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '支付宝',
			order_num: '87434893841',
			order_type: '已完成',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
			type: '5'
		},
		{
			id: '4',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '金币',
			order_num: '87434893841',
			order_type: '已完成',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
			type: '5'
		}
	]
	const tableData = [
		{
			id: '1',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '微信',
			order_num: '87434893841',
			order_type: '等待支付',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
			type: '1'
		},
		{
			id: '2',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '支付宝',
			order_num: '87434893841',
			order_type: '支付成功',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
			type: '2'
		},
		{
			id: '3',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '支付宝',
			order_num: '87434893841',
			order_type: '交易关闭',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
			type: '3'
		},
		{
			id: '4',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '金币',
			order_num: '87434893841',
			order_type: '退款成功',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
			type: '4'
		}
	]
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const secondList = [{
		name: '开门时间',
		index: '1',
		placeholder: '请选择开门时间',
		type: '3',
		ivalue: ''
	},
	{
		name: '关门时间',
		index: '2',
		placeholder: '请选择关门时间',
		type: '3',
		ivalue: ''
	},
	{
		name: '订单号',
		index: '3',
		placeholder: '请输入订单号',
		type: '2',
		ivalue: ''
	},
	{
		name: '提货卡号',
		index: '4',
		placeholder: '请输入提货卡号',
		type: '2',
		ivalue: ''
	},
	{
		name: '提货名称',
		index: '5',
		placeholder: '请输入提货名称',
		type: '2',
		ivalue: ''
	},
	{
		name: '订单状态',
		index: '6',
		placeholder: '请选择订单状态',
		type: '1',
		ivalue: ''
	},
	{
		name: '设备名称',
		index: '7',
		placeholder: '请选择设备',
		type: '1',
		ivalue: ''
	},
	{
		name: '设备编号',
		index: '8',
		placeholder: '请输入设备编号',
		type: '2',
		ivalue: ''
	},
	{
		name: '手机号码',
		index: '9',
		placeholder: '请输入用户手机号码',
		type: '2',
		ivalue: ''
	},
	{
		name: '补货员',
		index: '10',
		placeholder: '请选择设备补货员',
		type: '1',
		ivalue: ''
	}]
	const searchList = ref<searchList[]>([
		{
			name: '开门时间',
			index: '1',
			placeholder: '请选择开门时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '关门时间',
			index: '2',
			placeholder: '请选择关门时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '支付时间',
			index: '3',
			placeholder: '请选择支付时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '支付方式',
			index: '4',
			placeholder: '请选择支付方式',
			type: '1',
			ivalue: ''
		},
		{
			name: '订单号',
			index: '5',
			placeholder: '请输入订单号',
			type: '2',
			ivalue: ''
		},
		{
			name: '订单状态',
			index: '6',
			placeholder: '请选择订单状态',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备名称',
			index: '7',
			placeholder: '请选择设备',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备编号',
			index: '8',
			placeholder: '请输入设备编号',
			type: '2',
			ivalue: ''
		},
		{
			name: '手机号码',
			index: '9',
			placeholder: '请输入用户手机号码',
			type: '2',
			ivalue: ''
		},
		{
			name: '补货员',
			index: '10',
			placeholder: '请选择设备补货员',
			type: '1',
			ivalue: ''
		}
	])
	const tabsList = ref<tabsList[]>([
		{
			name: '零柜售',
			index: '1'
		},
		{
			name: '提货柜',
			index: '2'
		}
	])
	const cutTabs = (tabItem : tabsList) => {
		activeIndex.value = tabItem.index;
	};
	const focusClick = (searchItem : searchList) => {
		choiceIndex.value = searchItem.index
	};
	const blurClick = () => {
		choiceIndex.value = ''
	};
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
	const secondSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const secondCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
</script>
<style lang="scss">
	.pop-table .el-table__header th {
		display: none !important;
	}

	.pop-table .el-table__body td div {
		color: #333;
		font-weight: 600;
	}
</style>
<style lang="scss" scoped>
	.pop-table {
		.cont {
			color: #666;
			font-weight: 400;
		}
	}

	.info-title {
		font-size: 14px;
		margin-top: -20px;
		font-weight: bold;
		color: #000;
	}

	.from-title {
		font-size: 14px;
		padding: 10px;
		color: #000;
		font-weight: bold;
	}

	.goods_img {
		width: 30px;
		height: 50px;
	}

	.order-page {
		background-color: #fff;
		margin-top: 20px;
		padding: 10px;

		.title {
			font-size: 14px;
		}

		.top-tabs {
			text-align: center;
			display: flex;
			font-weight: bold;
			font-size: 14px;
			padding: 10px;

			.tabs-item {
				width: 150px;
				padding: 5px;
				background-color: #fff;
				border: 1px solid #d2d2d2;
				border-radius: 20px;
				margin-right: 15px;
			}

			.activity-item {
				background-color: #f0a93e;
				border: 1px solid #f0a93e;
				color: #fff;
			}

			.tabs-item:hover {
				cursor: pointer;
			}
		}

		.choice-list {
			display: flex;
			flex-wrap: wrap;
			padding: 10px 0;

			.choice-item {
				width: 20%;
				display: flex;
				align-items: center;
				margin-bottom: 10px;

				.el-select {
					width: 250px;
				}

				.choice-title {
					font-size: 12px;
					width: 100px;
					text-align: center;
				}

				.rounded-input {
					width: 250px;
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20px;
		}

		.page_number {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 15px;
		}

		.tables {
			margin-top: 10px;

			.wait {
				color: #0071bb;
			}

			.success {
				color: #f9b363;
			}

			.fail {
				color: #606266;
			}

			.check-text {
				color: #0071bb;
				cursor: pointer;
			}
		}
	}
</style>